<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片转Favicon工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
            background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #1f2937;
            position: relative;
        }

        h1 {
            color: #1e40af;
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.5rem;
            font-weight: 700;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            width: 100%;
            text-align: center;
        }

        .upload-area {
            border: 2px dashed #d1d5db;
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 20px;
            background: #f9fafb;
            transition: border-color 0.3s ease, background 0.3s ease;
            cursor: pointer;
        }

        .upload-area.dragover {
            border-color: #3b82f6;
            background: #e0f2fe;
        }

        .upload-area p {
            color: #6b7280;
            font-size: 1rem;
            margin-bottom: 10px;
        }

        .upload-area input[type="file"] {
            display: none;
        }

        .upload-area label {
            color: #3b82f6;
            font-weight: 600;
            cursor: pointer;
            text-decoration: underline;
        }

        .upload-area label:hover {
            color: #2563eb;
        }

        .preview {
            margin: 20px 0;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .preview img {
            max-width: 200px;
            max-height: 200px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .size-selector {
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        .size-selector label {
            font-size: 1rem;
            color: #374151;
        }

        .size-selector select {
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 1rem;
            color: #1f2937;
            background: #f9fafb;
            cursor: pointer;
            transition: border-color 0.3s ease;
        }

        .size-selector select:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }

        .buttons {
            display: flex;
            justify-content: center;
            gap: 12px;
        }

        button {
            padding: 12px 24px;
            cursor: pointer;
            background: linear-gradient(45deg, #3b82f6, #2563eb);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            transition: transform 0.2s, box-shadow 0.3s, background 0.3s;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            background: linear-gradient(45deg, #60a5fa, #3b82f6);
        }

        button:disabled {
            background: #d1d5db;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .error {
            color: #dc2626;
            margin-top: 10px;
            padding: 10px;
            background: #fee2e2;
            border-radius: 8px;
            display: none;
            font-size: 14px;
        }

        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #10b981;
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 500;
            opacity: 0;
            transform: translateY(-20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
            z-index: 1000;
        }

        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }

        .toast .close-btn {
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            color: #d1fae5;
        }

        .toast .close-btn:hover {
            color: #ffffff;
        }

        @media (max-width: 600px) {
            .container {
                padding: 20px;
            }
            h1 {
                font-size: 2rem;
            }
            .upload-area {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>图片转Favicon工具</h1>
    <div class="upload-area" id="uploadArea">
        <p>拖拽图片到此处，或</p>
        <label for="fileInput">点击选择图片</label>
        <input type="file" id="fileInput" accept="image/*">
    </div>
    <div class="preview" id="preview">
        <img id="previewImage" src="" alt="图片预览">
        <p id="fileName"></p>
    </div>
    <div class="size-selector">
        <label for="sizeSelect">选择尺寸：</label>
        <select id="sizeSelect">
            <option value="16">16x16</option>
            <option value="32" selected>32x32</option>
            <option value="64">64x64</option>
            <option value="128">128x128</option>
        </select>
    </div>
    <div class="buttons">
        <button id="convertBtn" disabled>转换并下载</button>
    </div>
    <div id="errorMsg" class="error"></div>
</div>

<script>
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('fileInput');
    const preview = document.getElementById('preview');
    const previewImage = document.getElementById('previewImage');
    const fileName = document.getElementById('fileName');
    const convertBtn = document.getElementById('convertBtn');
    const sizeSelect = document.getElementById('sizeSelect');
    const errorMsg = document.getElementById('errorMsg');
    let selectedFile = null;

    // 拖拽事件
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('dragover');
    });

    uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('dragover');
    });

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handleFile(files[0]);
        }
    });

    // 点击上传
    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
            handleFile(fileInput.files[0]);
        }
    });

    // 处理文件
    function handleFile(file) {
        // 验证文件类型
        if (!file.type.startsWith('image/')) {
            showError('请上传图片文件！');
            return;
        }

        selectedFile = file;
        const reader = new FileReader();
        reader.onload = (e) => {
            previewImage.src = e.target.result;
            fileName.textContent = file.name;
            preview.style.display = 'flex';
            convertBtn.disabled = false;
            errorMsg.style.display = 'none';
        };
        reader.readAsDataURL(file);
    }

    // 转换按钮点击事件
    convertBtn.addEventListener('click', async () => {
        if (!selectedFile) return;

        convertBtn.disabled = true;
        convertBtn.textContent = '转换中...';

        const formData = new FormData();
        formData.append('image', selectedFile);
        formData.append('size', sizeSelect.value);

        try {
            const response = await fetch('/tools/image/convert', {
                method: 'POST',
                body: formData
            });

            if (!response.ok) {
                throw new Error('转换失败，请重试！');
            }

            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'favicon.ico';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);

            showToast('转换成功，已开始下载！');
        } catch (e) {
            showError(e.message);
        } finally {
            convertBtn.disabled = false;
            convertBtn.textContent = '转换并下载';
        }
    });

    // 显示错误信息
    function showError(message) {
        errorMsg.textContent = message;
        errorMsg.style.display = 'block';
        preview.style.display = 'none';
        convertBtn.disabled = true;
        selectedFile = null;
        fileInput.value = '';
    }

    // 自定义提示框函数
    function showToast(message) {
        const existingToast = document.querySelector('.toast');
        if (existingToast) {
            existingToast.remove();
        }

        const toast = document.createElement('div');
        toast.className = 'toast';
        toast.innerHTML = `
                <span>${message}</span>
                <span class="close-btn">×</span>
            `;
        document.body.appendChild(toast);

        setTimeout(() => {
            toast.classList.add('show');
        }, 10);

        const autoCloseTimeout = setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => {
                toast.remove();
            }, 300);
        }, 3000);

        toast.querySelector('.close-btn').addEventListener('click', () => {
            clearTimeout(autoCloseTimeout);
            toast.classList.remove('show');
            setTimeout(() => {
                toast.remove();
            }, 300);
        });
    }
</script>
</body>
</html>